<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>眼冒金星</title>
    <style>
        body{
            margin: 0;
            height: 100vh;
            /*居中显示*/
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: black;
        }
        .container{
            /*网格式布局*/
            display:grid;
            /*--columns: 3;*/
            /*设置列*/
            grid-template-columns: repeat(var(--columns),1fr) ;
        }
        .container span{
            /*color: white;*/
            width: 25px;
            height: 25px;
            color: lime;
            border: 1px solid red;
            background-color: currentColor;
        }
        .container span{
            /*定义缩放*/
            transform: scale(0);
            animation: spin 5s linear infinite;
            /*设置动画延时*/
            animation-delay:calc(var(--delay)*1s);
        }
        @keyframes spin {
            0%{
                transform:rotate(0deg) scale(1);
            }
            5%,15%{
                transform: rotate(90deg) scale(0);
                background-color: white;
            }
            17.5%{
                transform: rotate(180deg) scale(1);
            }
            20%,100%{
                transform: rotate(90deg) scale(0);
            }
        }
        .container span:nth-child(1){--delay:0.8}

    </style>

</head>
<body>
    <div class="container" id="container">
    </div>
</body>

<script>
    (function () {
        window.onload = function () {
        var COLUMNS = 15;
        var ctn = document.getElementById("container");
        ctn.style.cssText += '--columns:'+ COLUMNS;
        for (var i = 0; i < COLUMNS*COLUMNS; i++) {
            var newspan = document.createElement("span");
            newspan.style.cssText = '--delay:' + Math.random()*4;
            ctn.appendChild(newspan);
        }
    }
    }())
</script>
</html>